<template>
	<view class="container">
		<view  class="header-board">
		<view @click="onIconBtnClick('back')" class="back-img">
			<image src="@/static/images/common/back.png" />
		</view>
			<view class="back-img" @click="onIconBtnClick('collect')"><image src="@/static/images/common/collect.png" /></view>
		</view>

		<view v-if="datalist.coverImgUrl" class="topic-preview"><image :src="datalist.coverImgUrl" /></view>

		<!-- 主题类型介绍 start -->
		<view v-if="datalist.lists" class="topic-board">
			<view class="topic-title">{{ datalist.title }}</view>
			<view class="topic-tags">{{ datalist.tags }}</view>
			<view class="topic-desc">{{ datalist.desc }}</view>
		</view>
		<!-- 主题类型介绍 end -->

		<!-- 播放列表 start -->
		<view class="topic-songs">
			<view class="topic-song" v-for="(item, i) in datalist.lists" :key="i" @click="onMusicClick(item,i)">
				<view class="img"><image src="../../../static/images/audio/play.png" /></view>
				<view class="song-desc-board">
					<view class="song-name ellipsis">{{ item.name || item.title }}</view>
					<view v-if="item.dt" class="song-dt">{{item.dt| formatMinutes}} min</view>
				</view>
			</view>
		</view>
		<!-- 播放列表 end -->

		<!-- 按钮模板 start -->
		  <Button @onBtnClick="onBtnClick" :data="button" ></Button>
		<!-- 按钮模板 end -->
		
		
		<loading></loading>
	</view>
	
</template>

<script>
	import { COLLECT_TYPE, OPEARTION_TYPE, TOPIC } from '../../../config/topic.js';
import Button from '@/component/common/button/button.vue';
import {formatMinutes} from '../../../utils/filter.js'
import {throttle} from '../../../utils/utils.js'
export default {
	components: { Button },
	data() {
		return {
			datalist: [],
			button: { text: '播放全部', bottom: 40, opacity: 0.8 },
			 lists: [],
			 coverImgUrl: '',
			 topic:'',
			 type:'',
			 isCollect: false,
			  topicId: 0,
			 
		};
	},

	filters:{
		formatMinutes
	},
	
	onLoad({ id }) {
		if (id) {
			const { topic, type } = this.$store.state;
			this.topic=topic
			this.type=type
			this.getdata(id);
		}
	},
	methods: {
		getdata(field) {
			this.$store.commit('startLoading')
			uniCloud
				.callFunction({
					name: 'music',
					data: {
						field: field,
						action: 'list',
						limit: 15
					}
				})
				.then(res => {
					this.$store.commit('endLoading')
					console.log(res);
					this.datalist = res.result.data;
					this.lists=this.datalist.lists
				});
		},
		 /**
		   * @description 跳转至播放页（播放全部）
		   * @param {object} e - 事件源
		   * @returns {void} 
		   */
		  onBtnClick: throttle(function () {
		    let { lists } = this.$data;
		
		    lists = lists.map(item => this.formatPlayParams(item));
			console.log(lists);
		
		    // 提交数据
		    this.$store.commit('changeState', {
		      playParams: lists[0],
		      playList: {
		        lists,
		        total: lists.length,
		        curIdx: 0
		      }
		    });
		    // 跳转至播放页
		    uni.navigateTo({
		    	url:'../play/play'
		    })
		  }, 300, false),
		  
		    /**
		     * @description 处理音频格式
		     * @param {object} playItem - 音频数据
		     * @returns {object}
		     */
		    formatPlayParams (playItem) {
		      const { topic, coverImgUrl } = this.$data;
		  
		      let playParams = {};
		      
		      switch (topic) {
		        case TOPIC.MUSIC:
		          const { id, name, author, url } = playItem;
		  
		          playParams = {
		            id,
		            title: name,
		            author,
		            imgUrl: url
		          }
		          break;
		        case TOPIC.STORY:
		          const { id: _id, title, text } = playItem;
		  
		          playParams = {
		            id: _id,
		            title,
		            text,
		            imgUrl: coverImgUrl
		          }
		          break;
		        default:
		          break;
		      }
		  
		      return playParams;
		    },
		  
		
		
		
		
		onIconBtnClick(action){
			switch (action){
				case 'back':
				uni.navigateBack({
				    delta:1
				});
					break;
				case 'collect':
					break;
				default:
					break;
			}
		},
		
		async onMusicClick(item,index){
			// 处理音频格式
			    const playParams = this.formatPlayParams(item);
				
				console.log(playParams);
				

			// uniCloud.callFunction({
			// 	name: 'music',
			// 	data: {
			// 		action: 'url',
			// 		field: item.id,
			// 		limit: 15
			// 	}
			// }).then(res=>{
			// 	console.log(res);
			// })
			
			
			let { lists } = this.$data;
			lists = lists.map(item => this.formatPlayParams(item));

			await this.$store.commit('changeState',{ playParams,playList: {
		        lists,
		        total: lists.length,
		        curIdx: index
		      } })
			  
			  uni.navigateTo({
			  	// url:'../play/play?id='+JSON.stringify(item) 
			  	url:'../play/play'
			  })
		}
	}
};
</script>

<style lang="scss">
.container {
	overflow: scroll;
	height: auto;
	box-sizing: border-box;
}



.topic-preview {
	width: 100%;
	height: 518rpx;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	overflow: hidden;
}

.topic-board {
	width: calc(100% - 60rpx);
	margin: 40rpx 30rpx;
}

.topic-board .topic-title {
	font-size: 40rpx;
	color: #e6e7f2;
}

.topic-board .topic-tags {
	margin-top: 20rpx;
	font-size: 30rpx;
	color: #a1a4b2;
}

.topic-board .topic-desc {
	margin-top: 25rpx;
	font-size: 28rpx;
	color: #a1a4b2;
}

.topic-count-board {
	display: flex;
	flex-direction: row;
	margin-top: 30rpx;
}

.topic-count-board .count {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-right: 50rpx;
	font-size: 24rpx;
	color: #a1a4b2;
}

.topic-count-board .count .img {
	width: 32rpx;
	height: 30rpx;
	margin-right: 15rpx;
}

.topic-songs {
	width: calc(100% - 60rpx);
	margin: 60rpx 30rpx 150rpx 30rpx;
}

.topic-songs .topic-song {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 150rpx;
	border-top: 1rpx solid #999;
}

.topic-songs .topic-song .img {
	width: 80rpx;
	height: 80rpx;
}

.topic-songs .topic-song .song-desc-board {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.topic-songs .topic-song .song-desc-board .song-name,
.topic-songs .topic-song .song-desc-board .song-dt {
	width: 560rpx;
	margin-left: 40rpx;
	color: #e6e7f2;
}

.topic-songs .topic-song .song-desc-board .song-dt {
	margin-top: 3rpx;
	font-size: 22rpx;
	color: #98a1bd;
}
</style>
